<template>
    <div class="emb-txt-arc">
        <div class="emb-txt-arc-warper">
            <h4>Radius</h4>
            <UxInputSlider v-model="fontArc" :precision="2" :min="arc_range.min" :max="arc_range.max"
                           :format="arcFormat" />
            <h4>Position</h4>
            <div class="emb-txt-arc-side">
                <span :class="{ active: side == -1 }" @click="setArcSide(-1)">Outside</span>
                <span :class="{ active: side == 1 }" @click="setArcSide(1)">Inside</span>
            </div>
            <div class="emb-txt-arc-view">

                <svg :viewBox="svgArc.view">
                    <path :d="svgArc.path" id="circle" stroke="#999" stroke-dasharray="2,2" fill="none"
                          vector-effect="non-scaling-stroke"></path>

                    <path :d="svgArc.link_d" stroke="#3199BD" stroke-width="1" fill="none"
                          vector-effect="non-scaling-stroke" v-if="svgArc.link_d"></path>
                    <text fill="#3199BD" x="0" :y="svgArc.link_y" :font-size="svgArc.link_size" v-if="svgArc.link_size"
                          dominant-baseline="middle" text-anchor="middle">R</text>

                    <text fill="#3199BD" :font-size="fontSize">
                        <textPath href="#circle" startOffset="50%" text-anchor="middle">A B C D E F G</textPath>
                    </text>
                </svg>

                <em v-if="svgArc.link_d"></em>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    props: {
        arc: { type: Number, default: () => 0 },
        side: { type: Number, default: () => -1 },
        font: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            arc_range: { min: 1, max: 20 },
        };
    },

    computed: {
        fontSize () {
            return this.font.size * 14 / 254 + 'px'
        },

        fontArc: {
            get () {
                // 1 磅等于1/72 英寸
                return Math.abs(this.arc / 254)
            },
            set (val) {
                const value = parseFloat(val) || 0
                if (value <= this.arc_range.min) {
                    this.$emit('update:arc', 0)
                } else {
                    this.$emit('update:arc', Math.round(parseFloat(value) * 254))
                }
            }
        },

        svgArc () {
            if (this.fontArc <= this.arc_range.min) {

                const arc = Math.abs(this.arc)
                const r = arc / 25.4;
                const padding = 10 + this.font.size * 26 / 254
                const left = -r - padding
                const right = r + padding
                const width = (r + padding) * 2


                // 直线
                return {
                    view: [left, left, width, width].join(' '),
                    radius: '',
                    path: `M ${left} 0 L ${right} 0`,
                    link_size: 0,
                    link_d: '',
                }

            } else {

                const arc = Math.abs(this.arc)
                const r = arc / 25.4;
                const padding = 10 + this.font.size * 14 / 254
                const left = -r - padding
                const width = (r + padding) * 2

                const path_inside = `M 0 -${r} A ${r} ${r} 0 0 0 0 ${r} A ${r} ${r} 0 0 0 0 -${r}`;
                const path_outside = `M 0 ${r} A ${r} ${r} 0 1 1 0 -${r} A ${r} ${r} 0 1 1 0 ${r}`;

                const link_size = width / 10
                const link_x1 = Math.max(0, 0.5 * r - link_size)
                const link_x2 = Math.max(0, 0.5 * r + link_size)
                const link_d = this.side > 0 ? `M 0 0 L 0 -${link_x1} M 0 -${link_x2} L 0 -${r}` : `M 0 0 L 0 ${link_x1} M 0 ${link_x2} L 0 ${r}`


                return {
                    view: [left, left, width, width].join(' '),
                    path: this.side > 0 ? path_inside : path_outside,
                    link_y: this.side > 0 ? -0.5 * r : 0.5 * r,
                    link_size: link_size,
                    link_d: link_d,

                    // path: `M 0 -40 A 40 40 0 0 0 0 40 A 40 40 0 0 0 0 -40` // 内描边
                    // path: `M 0 40 A 40 40 0 1 1 0 -40 A 40 40 0 1 1 0 40` // 外描边
                }
            }
        },
    },

    methods: {
        setArcSide (val) {
            this.$emit('update:side', val)
        },
        arcFormat (val) {
            if (val <= this.arc_range.min) {
                return 0
            } else {
                return val
            }
        },
    },

};
</script>

<style lang="scss" scoped>
.emb-txt-arc {
    .emb-txt-arc-warper {
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        padding: 18px;
        position: relative;

        h4 {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 16px;
        }

        .input-slider {
            margin-top: 11px;
            margin-right: 188px;
            margin-bottom: 15px;
            position: relative;

            &::after {
                content: 'in';
                position: absolute;
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #757575;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
            }

            &::v-deep>span {
                display: none;
            }

            &::v-deep .slider-warp {
                margin: 0 88px 0 0;
            }

            &::v-deep input {
                width: 68px;
                height: 32px;
                border-radius: 8px;
                text-align: left;
                box-sizing: border-box;
                padding-left: 8px;
                padding-right: 16px;
            }
        }

        .emb-txt-arc-side {
            display: inline-flex;
            height: 32px;
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            box-sizing: border-box;
            position: relative;
            margin-top: 12px;

            &::before {
                content: '';
                position: absolute;
                left: 50%;
                top: 0;
                height: 100%;
                width: 1px;
                transform: translateX(-50%);
                background: #e6e6e6;
            }

            span {
                width: 90px;
                line-height: 30px;
                text-align: center;
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #555555;
                cursor: pointer;

                &:hover {
                    color: #ea4c89;
                }

                &.active {
                    color: #ea4c89;
                }
            }
        }

        .emb-txt-arc-view {
            position: absolute;
            right: 30px;
            top: 24px;
            width: 118px;
            height: 118px;

            &>em {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                width: 4px;
                height: 4px;
                transform: translate(-50%, -50%);
                background-color: #3199bd;
                border-radius: 2px;
            }

            svg {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
